<template>
<div :class="[$style.container]">
<el-steps :active="current" align-center>
  <el-step :title="row.name" v-for="(row, i) in nodes" :key="i">
    <template #description>
      <div>{{row.auditBy}}</div>
      <div>{{row.endTime}}</div>
    </template>
  </el-step>
</el-steps>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
@Component
export default class AuditSteps extends Vue {
  @Prop() data!: any

  get nodes () {
    return this.data?.nodes || []
  }

  get current () {
    const idx = this.nodes.findIndex((v: any) => v.key === this.data?.currentNodeKey)
    return idx < 0 ? 100 : idx
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
}
</style>
